<template>
  <!-- 导航部分开始 -->
  <!--    <el-row style="margin-top: 10px;">-->
  <!--        <el-col :span="24">-->
  <!--            <el-breadcrumb separator="/">-->
  <!--                <el-breadcrumb-item>首页</el-breadcrumb-item>-->
  <!--                <el-breadcrumb-item>设备类型管理</el-breadcrumb-item>-->
  <!--            </el-breadcrumb>-->
  <!--        </el-col>-->
  <!--    </el-row>-->
  <!-- 导航部分结束 -->
  <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="queryTool" class="demo-form-inline">
                <el-form-item label="工装夹具编码">
                    <el-input v-model="queryTool.toolCode" placeholder="请输入工装夹具编码"/>
                </el-form-item>
                <el-form-item label="工装夹具名称">
                    <el-input v-model="queryTool.toolName" placeholder="请输入工装夹具名称"/>
                </el-form-item>

                <el-form-item label="工装夹具类型">
                    <el-select
                            style="width: 180px"
                            v-model="queryTool.toolTypeName"
                            placeholder="请选择工装夹具类型"
                    >
                        <el-option value="" label="全部"/>
                        <el-option v-for="item in toolTypes" :value="item"  :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="queryTool.brand" placeholder="请输入品牌"/>
                </el-form-item>
                <el-form-item label="型号">
                    <el-input v-model="queryTool.spec" placeholder="请输入型号"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                            style="width: 150px"
                            v-model="queryTool.maintenType"
                            placeholder="请选择状态"
                    >
                        <el-option value="1" label="在库"/>
                        <el-option value="2" label="被领用"/>
                        <el-option value="3" label="报废"/>
                        <el-option value="4" label="维修中"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadTool">搜索</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  <!-- 搜索栏部分结束 -->

  <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="新增设备类型"
                    placement="top-start"
            >
                <el-button @click="toAddTool" type="primary">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteBtnHandler" title="您确定要删除选中的工装夹具吗？">
                <template #reference>
                    <el-button :disabled="deleteBtnDisabled" type="primary">
                        <el-icon>
                            <Minus/>
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
            <el-button @click="exportTool" type="primary">
                <el-icon>
                    <Download/>
                </el-icon>
            </el-button>
            <!--            <el-button type="primary">-->
            <!--                <el-icon>-->
            <!--                    <Upload/>-->
            <!--                </el-icon>-->
            <!--            </el-button>-->
            <!--            <el-button type="primary">-->
            <!--                <el-icon>-->
            <!--                    <Download/>-->
            <!--                </el-icon>-->
            <!--            </el-button>-->
        </el-col>
    </el-row>
  <!-- 工具栏部分结束 -->
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="toolTaebl" @selection-change="handleSelectionChange" :data="tools" border :stripe="true" style="width: 95%">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="toolCode" label="编号">
                    <template #default="scope">
                        <el-link @click="showToolItem(scope.row.toolId)" type="primary">{{ scope.row.toolCode }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="toolName" label="名称"/>
                <el-table-column prop="brand" label="品牌"/>
                <el-table-column prop="spec" label="型号"/>
                <el-table-column prop="toolTypeName" label="类型"/>
                <el-table-column prop="stock" label="库存数量"/>
                <el-table-column prop="quantityAvail" label="可用数量"/>
                <el-table-column prop="maintenType" label="保养维护类型"/>
                <el-table-column prop="nextMaintenPeriod" label="下次保养周期"/>
                <el-table-column prop="nextMaintenDate" label="下次保养日期"/>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <template type="success" v-if="scope.row.status == 1">在库</template>
                        <template type="warning" v-else-if="scope.row.status == 2">被领用</template>
                        <template type="warning" v-else-if="scope.row.status == 3">报废</template>
                        <template type="warning" v-else-if="scope.row.status == 4">维修中</template>
                        <template type="danger" v-else>删除</template>
                    </template>
                </el-table-column>


                <el-table-column prop="remark" label="备注"/>
                <!-- 行工具栏 -->
                <el-table-column width="140" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toEditTool(scope.row.toolId)" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteTool(scope.row.toolId)" title="您确定要删除这个工装夹具吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->
  <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                           :total="total"/>
        </el-col>
    </el-row>
  <!-- 分页部分结束 -->

  <!-- 使用子组件 -->
    <ToolAddWin :visible="addToolVisble" :toolTypes="this.toolTypes" @optionCompleted="addOptionCompleted"/>
    <ToolEditWin :visible="editToolVisble" :toolTypes="this.toolTypes" :toolId="editToolId" @optionCompleted="editOptionCompleted"/>
    <ToolItem :visible="showToolVisble" :toolTypes="this.toolTypes" :toolId="showToolId" @optionCompleted="showOptionCompleted"/>
</template>

<script>
import ToolAddWin from './tool-add-win.vue';
import ToolEditWin from './tool-edit-win.vue';
import ToolItem from './tool-item-win.vue';
// 引入api
import toolRequest from '../../../api/tool.js';
import config from "@/util/config.js";
// import toolTypeRequest from "@/api/toolType.js";

export default {
    components: {
        ToolAddWin,
        ToolEditWin,
        ToolItem
    },
    name: "Tool.vue",
    data() {
        return {
            queryTool: {},// 绑定查询条件
            createTimes: [],// 绑定搜索栏中的时间范围
            tools: [],// 列表数据
            toolTypes:[],
            currentPage: 1,// 当前页码
            limit: 10,// 每页大小
            total: 0,// 总条数
            addToolVisble: false,// 新增设备类型的弹窗是否显示

            editToolVisble: false,// 标记是否显示编辑设备类型的弹窗
            editToolId: -1,// 编辑设备类型的id

            showToolVisble: false,// 标记是否显示设备类型项的弹窗
            currentToolId: -1,// 当前设备类型的type

            showToolId:-1,

            editBtnDisabled: true,
            deleteBtnDisabled: true
        }
    }, methods: {
        exportTool() {
            // 超链接下载导出文件
            // 拼接请求参数
            let url = config.tmUrl + "/tm/tool/export?a=1";
            for (let paramName in this.queryTool) {
                if (this.queryTool[paramName]) {
                    url += "&" + paramName + "=" + this.queryTool[paramName];
                }
            }
            url += "&page=" + this.currentPage + "&limit=" + this.limit;
            //超链接请求
            location.href = url;
        },
        // 重置查询条件表单
        resetForm(){
            this.queryTool={};
        },
        /**
         * 工具栏删除按钮事件
         */
        deleteBtnHandler() {
            let selectionRows = this.$refs.toolTaebl.getSelectionRows();
            let toolIds = new Array();
            selectionRows.forEach(row => {
                toolIds.push(row.toolId);
            })
            toolRequest.deleteTools(toolIds, res => {
                this.$message({
                    type: 'success',
                    message: '删除工装夹具成功!'
                });
                this.loadTool();
            });
        },
        /**
         * 行删除按钮事件
         * @param dictId
         */
        deleteTool(toolId) {
            toolRequest.deleteTool(toolId, res => {
                this.$message({
                    type: 'success',
                    message: '删除工装夹具成功!'
                });
                this.loadTool();
            });
        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler() {
            let editTool = this.$refs.toolTaebl.getSelectionRows()[0];
            if (editTool != undefined) {
                this.editToolId = editTool.toolId;
                this.editToolVisble = true;
            } else {
                this.$message({
                    type: 'warning',
                    message: '请选择要编辑的设备类型!'
                });
            }
        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange() {
            let selectionRows = this.$refs.toolTaebl.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 设备类型列表中设备类型类别的超链接事件
         * @param dict
         */
        showToolItem(toolId) {
            this.showToolId = toolId;
            // 弹窗
            this.showToolVisble = true;
            // this.dictItemVisible = true;
        },
        /**
         * 监听子组件设备类型项弹窗的操作是否完成
         */
        showOptionCompleted() {
            // 将弹窗设置为false
            this.showToolVisble = false;
            // 重新加载列表
            this.loadTool();
        },
        /**
         * 监听编辑设备类型的子组件操作完成的事件
         */
        editOptionCompleted() {
            // 将弹窗设置为false
            this.editToolVisble = false;
            // 重新加载列表
            this.loadTool();
        },
        /**
         * 行编辑按钮事件
         */
        toEditTool(toolId) {
            // 将传入的toolId设置到editToolId
            this.editToolId = toolId;
            // 弹出编辑窗体
            this.editToolVisble = true;
        },
        /**
         * 工具栏的新增设备类型按钮事件
         */
        toAddTool() {
            // 弹窗 addToolVisble设置为true
            this.addToolVisble = true;
        },
        /**
         * 监听添加设备类型的子组件操作完成的事件
         */
        addOptionCompleted() {
            // 将弹窗设置为false
            this.addToolVisble = false;
            // 重新加载列表
            this.loadTool();
        },
        /**
         * 翻页的事件
         * @Param currentPage 最新的页码
         */
        pageChange(currentPage, pageSize) {
            // 将最新的页码赋值给this.currentPage
            this.currentPage = currentPage;
            // 重新加载数据
            this.loadTool();
        },
        queryToolTypeNames(){
            toolRequest.queryToolTypeNames(res => {
                this.toolTypes = res.data;
            })
        },
        /**
         * 加载设备类型信息
         */
        loadTool() {
            // 设置其他的条件
            this.queryTool.page = this.currentPage;
            this.queryTool.limit = this.limit;
            // console.log(this.createTimes);
            // 设置时间
            if (this.createTimes != undefined && this.createTimes.length > 0)
                this.queryTool.createTimeStart = this.createTimes[0];
            if (this.createTimes != undefined && this.createTimes.length > 1)
                this.queryTool.createTimeEnd = this.createTimes[1];
            toolRequest.loadTool(this.queryTool, res => {
                this.tools = res.data.data;
                this.total = res.data.total;
            })
        }
    }, mounted() {
        this.loadTool();
        this.queryToolTypeNames();
    }
}
</script>

<style scoped>

</style>